@use "./theme";
@use "./transition";
@use "./element-plus";
@use "./sidebar";
@use "./dark";

/* 自定义全局 CssVar */
:root {
  /* 左侧菜单展开、收起动画时长 */
  --pure-transition-duration: 0.3s;

  /* 常用border-color 需要时可取用 */
  --pure-border-color: rgb(5 5 5 / 6%);

  /* switch关闭状态下的color 需要时可取用 */
  --pure-switch-off-color: #a6a6a6;

  /** 主题色 */
  --pure-theme-sub-menu-active-text: initial;
  --pure-theme-menu-bg: none;
  --pure-theme-menu-hover: none;
  --pure-theme-sub-menu-bg: transparent;
  --pure-theme-menu-text: initial;
  --pure-theme-sidebar-logo: none;
  --pure-theme-menu-title-hover: initial;
  --pure-theme-menu-active-before: transparent;
}

/* 灰色模式 */
.html-grey {
  filter: grayscale(100%);
}

/* 色弱模式 */
.html-weakness {
  filter: invert(80%);
}

.main_box {
  display: flex;
  flex-direction: column;

  .tableBox {
    border: 1px solid #eee;
    border-bottom: 0;
  }

  .pagination {
    @include pagination-box;
  }

  .singe-line {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    white-space: nowrap;
  }
}

.applyForm {
  .el-descriptions__label {
    margin-right: 0;
  }
}

.checkbox {
  position: relative;
  box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-top: 6px;
  user-select: none;
  user-select: none;
  user-select: none;
  user-select: none;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 2px;
  -webkit-touch-callout: none;

  &::after {
    position: absolute;
    top: 50%;
    left: 50%;
    box-sizing: content-box;
    display: none;
    width: 11px;
    height: 8px;
    content: "";
    background: url("@/assets/images/gou.png") no-repeat center center;
    background-size: 100% 100%;
    transform: translateX(-50%) translateY(-50%);
  }

  &.is-checked {
    background-color: $main-color;
    border-color: $main-color;

    &::after {
      display: block;
    }
  }

  &.is-disabled {
    cursor: not-allowed;
    background-color: #f5f7fa;
    border-color: #e4e7ed;

    &::after {
      display: none;
    }
  }
}
